<template>
  <div id="buyItNow">
    <div id="main">
      <div id="productImg">
        <img v-bind:src="info.image" />
      </div>
      <div id="productInfo">
        <h2>{{ info.name }}</h2>
        <span id="seller">卖家：{{ info.sellerUsername }}</span>
        <!-- <span>所属类别：{{getType(info.type)}}</span>
                <h3>价格：{{info.price}}</h3>
                <span>数量：{{number}} </span> -->
        <div id="gray">
          <h3>价格：￥{{ info.price }}</h3>
          <h3>数量：{{ number }}</h3>
        </div>
        <span>所属类别：{{ getType(info.type) }}</span>

        <span>详情：{{ info.description }}</span>
      </div>
    </div>
    <div id="orderInfo">
      <h2>总价：{{ info.total }}</h2>
      <h2>交易时间及地点：{{ info.timeAndPlace }}</h2>
      <h2>卖家电话：{{ info.sellerPhone }}</h2>
      <h2>请输入您的电话：<input type="text" v-model="buyerPhone" /></h2>
      <h2>卖家收款码（可选择线上付款或货到付款）：</h2>
      <img :src="info.sellerCode" alt="" />
      <div id="op">
        <el-button @click="confirmOrder">确认订单</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../network/request";

export default {
  data() {
    return {
      info: "",
      total: "",
      number: this.$route.query.number,
      buyerPhone: "",
    };
  },

  methods: {
    getType(type) {
      switch (type) {
        case 1:
          return "电子产品";
        case 2:
          return "学习文具";
        case 3:
          return "生活用品";
        case 4:
          return "美妆服饰";
        case 5:
          return "教材图书";
        case 6:
          return "食品饮料";
        case 7:
          return "精美礼品";
        case 8:
          return "休闲娱乐";
        case 9:
          return "其他";
      }
    },
    confirmOrder() {
      if (this.buyerPhone.length != 11) {
        this.$message.error("请输入正确的电话号码");
        return;
      }
      var date = new Date();
      var year = date.getFullYear(); //存储年
      var month = date.getMonth() + 1; //存储月份
      var day = date.getDate(); //存储日期
      var time = year + "." + month + "." + day;
      console.log(time);
      request({
        method: "post",
        url: "/buyItNow",
        data: {
          pid: this.$route.query.id,
          number: this.number,
          buyerPhone: this.buyerPhone,
          time: time,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.res == 1) {
          this.$message({
            message: "确认订单成功",
            type: "success",
          });
          this.$router.push({
            path: "/myOrder",
          });
        }
      });
    },
  },

  created() {
    request({
      url: "/buyItNow",
      method: "get",
      params: {
        username: this.$store.state.username,
        pid: this.$route.query.id,
        number: this.$route.query.number,
      },
    }).then((res) => {
      this.info = res.data;
    });
  },
};
</script>

<style scoped>
#buyItNow {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#main {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

#productInfo {
  width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#orderInfo {
  padding: 20px;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#productImg img {
  height: 350px;
  padding-bottom: 80px;
}

#orderInfo img {
  height: 200px;
  width: 200px;
}

#seller {
  text-align-last: left;
}

input {
  line-height: 25px;
  outline: none;
  font-size: 20px;
}

#op {
  margin-left: 900px;
}

#gray {
  display: flex;
  flex-direction: column;
  background-color: rgb(232, 232, 232);
  justify-content: space-around;
  height: 100px;
  padding-left: 20px;
}

.el-button {
  background-color: rgb(255, 0, 54);
  color: #fff;
}
</style>